<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown  active"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Online Journal</h1>
					<h1 class="title">
						Creative Bits And Bobs
					</h1>
					<h1 class="intro">
						Web design is the creation of <span class="hue">digital environments</span>, that <span>facilitate</span> and encourage human activity; 
						<span>reflect </span> or adapt to individual voices and content.
					</h1>
				</div>
			</div>
		</div>
		
		<div class="container wrapper">
		<div class="inner_content">
		<div class="row pad30">
		
		<div class="col-md-8 col-md-offset-2">
		<h1 class="post_intro center">
			Dictum Gravida Nulla Facilisis Venenatis
		</h1>
		
		<div class="post pad30">
		<img src="img/large/blog_big.jpg" alt="">
		
		<p class="pad30">
			<span class="dropcap">I</span> was so excited by these heavy minute-guns following one another that I so far forgot my personal safety and my scalded hands as to clamber 
			up into the hedge and stare towards Sunbury.  As I did so a second report followed, and a big projectile hurtled overhead towards Hounslow.  
			I expected at least to see smoke or fire, or some such evidence of its work.  But all I saw was the deep blue sky above, with one solitary star, 
			and the white mist spreading wide and low beneath. And there had been no crash, no answering explosion.  The silence was restored; the minute 
			lengthened to three.
		</p>
		
		<p>
			Every moment I expected the fire of some hidden battery to spring upon him; but the evening calm was unbroken. The figure of the Martian grew smaller as 
			he receded, and presently the mist and the gathering night had swallowed him up. By a common impulse we clambered higher. Towards Sunbury was a dark appearance, 
			as though a conical hill had suddenly come into being there, hiding our view of the farther country; and then, remoter across the river, over Walton, we saw another 
			such summit. These hill-like forms grew lower and broader even as we stared.
		</p>
		
		<h4 class="grey2">
			<i class="fa fa-quote-left fa-3x pull-left colour marg-left5"></i>
			Moved by a sudden thought, I looked northward, and there I perceived a third of these cloudy black kopjes had risen. Everything had suddenly become very still. 
			Far away to the southeast, marking the quiet, we heard the Martians hooting to one another, and then the air quivered again with the distant thud of their guns.
		</h4>
		
		<p>
			Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. 
			Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of 
			houses, or other possible cover for guns, chanced to be in front of him. Some fired only one of these, some two--as in the case of the one we had seen; the one at Ripley is said to 
			have discharged no fewer than five at that time. These canisters smashed on striking the ground--they did not explode--and incontinently disengaged an enormous volume of heavy, inky 
			vapour, coiling and pouring upward in a huge and ebony cumulus cloud, a gaseous hill that sank and spread itself slowly over the surrounding country. And the touch of that vapour, 
			the inhaling of its pungent wisps, was death to all that breathes.
		</p>
		
		<div class="post-meta pad25">
			<ul>
				<li>Posted <a href="#">admin</a> <span class="muted">|</span></li>
				<li>15th April 2013 </li>
				<li>In <a href="#">video</a>, <a href="#">premium themes</a> <span class="muted">|</span></li>
				<li>Tags <a href="#">themes</a>, <a href="#">design</a> <span class="muted">|</span></li>
				<li><a href="#">3</a> comments</li>
			</ul>
			</div>
			
			<div class="pad5"></div>
			<hr>
			<div class="center">
			<a href="#" class="btn btn-inverse btn-medium btn-rounded marg-right5"><h6><i class="fa fa-arrow-circle-left grey"></i></h6></a> 
			<a href="#" class="btn btn-inverse btn-medium btn-rounded"><h6><i class="fa fa-arrow-circle-right grey"></i></h6></a>
			</div>
			<hr>  
			
  	<!-- Comments -->   
		<h2>3 comments</h2> 
		<!--Comment 1-->
		<div class="media">
              <a class="pull-left" href="#">
                <img src="img/avatar1.jpg" alt="" class="avatar img-circle"/></a>
              <div class="media-body">
                <p class="media-heading">
				<a href="#">Lauren Williams</a> &raquo; 27 March 2013 &raquo; <a href="#">Reply</a></p>
				Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
				Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. 
				Donec lacinia congue felis in faucibus.
				
       <!--Comment 2-->      
				<div class="media">
                  <a class="pull-left" href="#">
                    <img src="img/my_avatar.jpg" alt="" class="avatar img-circle"/></a>
                  <div class="media-body">
                    <p class="media-heading">
					<a href="#">Admin</a> &raquo; 27 March 2013 &raquo; <a href="#">Reply</a></p>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, 
					vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue 
					felis in faucibus.
                  </div>
				</div>
			</div>
			
		<!--Comment 3-->
            <div class="media">
              <a class="pull-left" href="#">
                <img src="img/avatar2.jpg" alt="" class="avatar img-circle"/></a>
              <div class="media-body">
                <p class="media-heading">
				<a href="#">Lauren Williams</a> &raquo; 23 March 2013 &raquo; <a href="#">Reply</a></p>
				Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 
				tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Enim ultrices, elementum phasellus. 
				Mauris sed 	nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, suspendisse ac nec et. Nulla sed mauris, congue duis 
				proin nonummy adipiscing vitae  Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tristique facilisis venenatis risus. Enim ultrices, 
				elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tristique.
				</div>
			</div>
		</div>
	<!--//Comments-->
	
	<!-- Comment form -->
		<h2 class="pad25">Have your say!</h2>
		<div class="contact_form">  
		<div id="note"></div>
		<div id="fields">
		<form id="ajax-contact-form">
			<p class="form_info">name <span class="required">*</span></p>
			<input class="col-xs-12 col-sm-8 col-md-8" type="text" name="name" value="" />
			<p class="form_info">email <span class="required">*</span></p>
			<input class="col-xs-12 col-sm-8 col-md-8" type="text" name="email" value="" />
			<p class="form_info">message</p>
			<textarea name="message" id="message" class="col-xs-12 col-sm-12 col-md-11"></textarea>
			<div class="clear"></div>
			<a href="#" class="btn btn-primary  btn-custom btn-rounded">SEND</a>
		</form>
		</div>
	</div>
		</div>
            </div>
		</div>
	</div>
	</div>
	<div class="pad45 hidden-md hidden-lg"></div>
	<!--footer-->
		<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
					<!-- up to top -->
				<a href="#"><i class="go-top hidden-phone hidden-tablet fa fa-angle-double-up"></i></a>
				<!--//end--> 

<!-- scripts -->
<script src="js/jquery.js"></script>			
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

